<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1" >
		<title>biu</title>
		<style type="text/css">
			html{
				animation: html 4s ease infinite;
			}
			.heart{
				width: 200px;
				height: 200px;
				background-color: #eb3f84;
				margin: 200px auto;
				position: relative;
				transform: rotate(45deg);
				animation: heart 4s ease infinite;
			}
			.heart::before{
				content: '';
				width: 200px;
				height: 200px;
				background-color: #eb3f84;
				border-radius: 50%;
				position: absolute;
				top: -100px;
				left: 0;
				animation: right 4s ease infinite;
				transition: all is ease;
			}
			.heart::after{
				content: '';
				width: 200px;
				height: 200px;
				background-color: #eb3f84;
				border-radius: 50%;
				position: absolute;
				top: 0;
				left: 100px;
				animation: left 4s ease infinite;
				transition: all is ease;
				}
				@keyframes html{
					0%{
						background-color: #eb3f84;
					}
					50%{
						background-color: beige;
					}
					100%{
						background-color: #eb3f84;
					}
				}
				@keyframes heart{
					0%{
						transform: rotate(0deg);
						border-radius: 200px;
						background-color: beige;
					}
					30%{
						transform: rotate(45deg);
						border-radius: 10px;
					}
					50%{
						background-color: #eb3f84;
					}
					70%{
						transform: rotate(45deg);
						border-radius: 10px;
					}
					100%{
						transform: rotate(90deg);
						border-radius: 200px;
						background-color: beige;
					}
				}
			@keyframes right{
				0%{
				top:0;
				    background-color: beige;
				}
				30%{
				    top: -100px;
				}
				50%{
				    background-color: #eb3f84;
				}
				70%{
				    top: -100px;
				}
				100%{
				    top: 0;
				    background-color: beige;
					}
			}
			@keyframes left{
			    0%{
				left:0;
				background-color: beige;
			}
			    30%{
				    left: -100px;
			}
			    50%{
				    background-color: #eb3f84;
			}
			    70%{
				    left: -100px;
			}
			100%{
				left: 0;
				background-color: beige;
			}
			}
		</style>	
	</head>
	<body>
		<div class="heart"></div>
	</body>
</html>